<template>
	<view class='account'>
		<search></search>
		<view class='welcome'>
			<view class="title1" v-if="token">{{userInfo.username}}! {{$t('account.welcome_title1')}}</view>
			<view class="title2" v-else>{{$t('account.welcome_title2')}}</view>
		</view>
		<view class="loginTool dFlex jAround_aCenter">
			<!-- 未登录 -->
			<view class="login" v-if="!token" @click='loginDialog = true'>{{$t('account.login')}} /
				{{$t('account.regist')}}
			</view>
			<!-- 登录 -->
			<view class="showContent dFlex jAround_aStart" v-else>
				<navigator url="./orders?status=1" class="menuOne dFlex jCenter_aCenter flexDirection" >
					<view class="menuIcon dFlex jCenter_aCenter">
						<!-- <u-icon name="@/static/images/icon_order1" size='24px'></u-icon> -->
						<image src="../static/images/daifukuan.png" style="width: 50rpx;height:60rpx"></image>
					</view>
					<text style="text-align: center;">{{$t('account.order_dzf')}}</text>
				</navigator>
				<navigator url="./orders?status=2" class="menuOne dFlex jCenter_aCenter flexDirection">
					<view class="menuIcon dFlex jCenter_aCenter">
						<!-- <u-icon name="file-text" size='24px'></u-icon> -->
						<image src="../static/images/daifahuo.png" style="width: 60rpx;height:50rpx"></image>
					</view>
					<text style="text-align: center;">{{$t('account.order_dfh')}}</text>
				</navigator>
				<navigator url="./orders?status=3" class="menuOne dFlex jCenter_aCenter flexDirection">
					<view class="menuIcon dFlex jCenter_aCenter">
						<!-- <u-icon name="file-text" size='24px'></u-icon> -->
						<image src="../static/images/daishouhuo.png" style="width: 50rpx;height:50rpx"></image>
					</view>
					<text style="text-align: center;">{{$t('account.order_dsh')}}</text>
				</navigator>
				<navigator url="./orders?status=4" class="menuOne dFlex jCenter_aCenter flexDirection">
					<view class="menuIcon dFlex jCenter_aCenter">
						<!-- <u-icon name="file-text" size='24px'></u-icon> -->
						<image src="../static/images/yiwancheng.png" style="width: 50rpx;height:55rpx"></image>
					</view>
					<text style="text-align: center;">{{$t('account.order_ywc')}}</text>
				</navigator>
			</view>
		</view>
		<view class="part">
			<view class="partTit">{{$t('account.my_account')}}</view>
			<view class="partContent">
				<view class="partLine dFlex jBetween_aCenter" @click='goPage("./profile")'>
					<view class="line_content dFlex jStart_aCenter">
						<view class="line_icon imgPublic">
							<image src="../static/images/gerenxinxi.png" mode="widthFix"></image>
						</view>
						<text>{{$t('account.my_info')}}</text>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="partLine dFlex jBetween_aCenter" @click='goPage("./address")'>
					<view class="line_content dFlex jStart_aCenter">
						<view class="line_icon imgPublic">
							<image src="../static/images/address.png" mode="widthFix"></image>
						</view>
						<text>{{$t('account.address')}}</text>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="partLine dFlex jBetween_aCenter" @click='goPage("./feedback")'>
					<view class="line_content dFlex jStart_aCenter">
						<view class="line_icon imgPublic">
							<image src="../static/images/yijian.png" mode="widthFix"></image>
						</view>
						<text>{{$t('account.feedback')}}</text>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="partLine dFlex jBetween_aCenter" @click='goPage("./coupon")'>
					<view class="line_content dFlex jStart_aCenter">
						<view class="line_icon imgPublic">
							<image src="../static/images/youhui.png" mode="widthFix"></image>
						</view>
						<text>{{$t('account.coupon')}}</text>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="partLine dFlex jBetween_aCenter" @click='goXieyi(1)'>
					<view class="line_content dFlex jStart_aCenter">
						<view class="line_icon imgPublic">
							<image src="../static/images/xieyi.png" mode="widthFix"></image>
						</view>
						<text>{{$t('login.xieyi2')}}</text>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="partLine dFlex jBetween_aCenter" @click='goXieyi(2)'>
					<view class="line_content dFlex jStart_aCenter">
						<view class="line_icon imgPublic">
							<image src="../static/images/yinsi.png" mode="widthFix"></image>
						</view>
						<text>{{$t('login.xieyi4')}}</text>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view class="part">
			<view class="partTit">{{$t('account.set')}}</view>
			<view class="partContent">
				<view class="partLine dFlex jBetween_aCenter" @click="showSelectLanguage=true">
					<view class="line_content dFlex jStart_aCenter">
						<view class="line_icon imgPublic">
							<image src="../static/images/yuyan.png" mode="widthFix"></image>
						</view>
						<text>{{$t('account.language')}}</text>
					</view>
					<text style="text-align: right;width: 45%;">{{language}}</text>
					<u-icon name="arrow-right"></u-icon>
					
				</view>
				<!-- v-if="token"  -->
				<view v-if="token" @click="loginOut" class="partLine dFlex jBetween_aCenter">
					<view class="line_content dFlex jStart_aCenter">
						<view class="line_icon imgPublic">
							<image src="../static/images/tuichu.png" mode="widthFix"></image>
						</view>
						<text>{{$t('account.quit')}}</text>
					</view>
					
				</view>
				<view v-if="token" @click="zhuxiao" class="partLine dFlex jBetween_aCenter">
					<view class="line_content dFlex jStart_aCenter">
						<view class="line_icon imgPublic">
							<image src="../static/images/zhuxiao.png" mode="widthFix"></image>
						</view>
						<text>{{$t('account.zhuxiao')}}</text>
					</view>
					
				</view>
			</view>
		</view>
		<view class="cate-box">
			<u-collapse @change="change" @close="close" @open="open" :accordion="true">
				<u-collapse-item :title="item.mobile_name" v-for="(item,index) in lists" :key="index">
					<navigator :url="'/pages/shopList?cid='+item.id" v-for="(sub,idx) in item.second" :key="idx">
						<view class="sub-cate">{{sub.mobile_name}}</view>
					</navigator>
				</u-collapse-item>
			</u-collapse>
		</view>
		<u-picker :cancelText="$t('operateBtn.cancelBtn')" :confirmText="$t('operateBtn.sureBtn')" :show="showSelectLanguage" :columns="languagelist" @close="showSelectPhone=false"
			@cancel="showSelectLanguage=false" :closeOnClickOverlay="true" @confirm="chooseLanguage">
			
		</u-picker>
		<pageBottom :show="true"></pageBottom>
		<!-- 登录弹窗 -->
		<u-popup :show="loginDialog" mode="center">
			<login @close="loginIn"></login>
		</u-popup>
	</view>
</template>

<script>
	import login from '@/components/login.vue';
	import search from '@/components/search.vue';
	import pageBottom from '@/components/pageBottom.vue';
	export default {
		components: {
			search,
			login,
			pageBottom
		},
		data() {
			return {
				token: '',
				userInfo: {},
				header_top: getApp().globalData.header_top,
				header_height: getApp().globalData.header_height,
				// 切换语言
				languagelist:[[ "English", "بالعربية"]],
				language: 'English',
				language2:'en',
				showSelectLanguage:false,
				loginDialog: false,
				lists: []
			};
		},
		onLoad() {
			for (var i = 0; i < 5; i++) {
				uni.setTabBarItem({
					index: i,
					text: this.$t(`tab.menu${i + 1}`),
				})
			}
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('pages.account'),
			})

			this.token = this.$cache.get('token')
			this.userInfo = this.$cache.get('userInfo')
			if (uni.getStorageSync('showLanguage') == 'zh') {
				this.language = 'English';
			} else if (uni.getStorageSync('showLanguage') == 'en') {
				this.language = 'English';
			} else if (uni.getStorageSync('showLanguage') == 'sa') {
				this.language = 'بالعربية';
			} else if (!uni.getStorageSync('showLanguage')) {
				this.language = 'English';
				uni.setStorageSync('showLanguage', 'en');
			}
			this.init()
		},
		methods: {
			async init() {
				const result = await this.$api('/index/category')
				this.lists = result
			},
			goXieyi(type) {
				uni.navigateTo({
					url: './xieyi?type=' + type
				})
			},
			goPage(url) {
				if (!this.token) {
					this.loginDialog = true
				} else {
					uni.navigateTo({
						url: url
					})
				}
			},
			loginIn() {
				this.token = this.$cache.get('token')
				this.userInfo = this.$cache.get('userInfo')
				this.loginDialog = false;
			},
			loginOut() {
				const _this = this;
				uni.showModal({
					title: this.$t('account.tips_title1'),
					content: this.$t('account.tips_content1'),
					cancelText: this.$t("operateBtn.cancelBtn"),
					confirmText: this.$t("operateBtn.sureBtn"),
					success(res) {
						if (res.confirm) {
							_this.$cache.set('token', null)
							_this.$cache.set('userInfo', null)
							_this.token = ''
							_this.userInfo = ''
						}
					}
				})
			},
			//注销账号
			zhuxiao() {
				const _this = this
				uni.showModal({
					title: this.$t('account.tips_title1'),
					content: this.$t('account.tips_zhuxiao'),
					cancelText: this.$t("operateBtn.cancelBtn"),
					confirmText: this.$t("operateBtn.sureBtn"),
					success(res) {
						if (res.confirm) {
							_this.$api('/User/deluser').then(res => {
								_this.$cache.set('token', null)
								_this.$cache.set('userInfo', null)
								_this.token = ''
								_this.userInfo = ''
							})
						}
					}
				})
			},
			// 选择语言
			chooseLanguage(e) {
				console.log(e.value);
				this.language=e.value[0]
				if(e.value[0]=='English'){
					this.language2='en'
				}else{
					this.language2='sa'
				}
				this.$i18n.locale = this.language2;
				for (var i = 0; i < 5; i++) {
					uni.setTabBarItem({
						index: i,
						text: this.$t(`tab.menu${i + 1}`),
					})
				}
				uni.setStorageSync('showLanguage',this.language2);
				this.init()
				this.showSelectLanguage=false
			}
		}
	}
</script>

<style lang="scss">
	.part {
		width: 100%;
		margin-bottom: 12px;

		.partContent {
			.partLine {
				.line_content {
					.line_icon {
						width: 22px;
						height: 24px;
						margin-right: 15px;
					}

					width: max-content;
					font-size: 14px;
					color: #404553;
					margin-left: 15px;
				}

				width: 100%;
				padding:10px 12px;
				box-sizing: border-box;
			}

			width: 100%;
		}

		.partTit {
			width: 100%;
			padding: 12px;
			box-sizing: border-box;
			font-weight: bold;
		}
	}

	.loginTool {
		.showContent {
			width: 100%;

			.menuOne {
				.menuIcon {
					width: 40px;
					height: 40px;
					text-align: center;
					line-height: 40px;
					border-radius: 50%;
					// background: #feee00;
					margin-bottom: 6px;
				}

				width: 25%;
			}
		}

		.login {
			width: max-content;
			background: rgb(64, 69, 83);
			color: white;
			border-radius: 50px;
			padding: 10px;
		}

		width: 100%;
		padding: 15px 0;
	}

	.welcome {
		.title1 {
			font-size: 16px;
			font-weight: bold;
		}

		width:100%;
		padding:20px 12px;
		box-sizing: border-box;
		background: #f7f7fa;
	}

	::v-deep.u-popup__content {
		border-radius: 10px;
	}

	page {
		background: white;
	}

	.sub-cate {
		margin: 15rpx 0;
		text-decoration: underline;
	}

	.account {
		padding-bottom: 50px;
	}
</style>